<template>
  <div class="rule_container">
    <div class="header">
      <p>读者规则信息查看</p>
    </div>
    <div class="banner">
      <el-tooltip
          v-for="item in ruleList"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :key="item.ruleId"
          effect="dark"
          placement="right"
      >
        <div slot="content" class="content_tip">
          可借阅数量: {{ item.bookLimitNumber }}<br/>
          可借阅天数: {{ item.bookDays }}<br/>
          可借阅图书馆: {{ item.bookLimitLibrary }}<br/>
          过期扣费/天: {{ item.bookOverdueFee }}
        </div>
        <el-button class="rule-button">借阅证规则编号: {{ item.bookRuleId }}</el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
export default {
  data() {
    return {
      ruleList: [
        {
          ruleId: 0,
          bookRuleId: Number,
          bookDays: Number,
          bookLimitNumber: Number,
          bookOverdueFee: Number,
          bookLimitLibrary: "",
          createTime: "",
          updateTime: "",
        },
      ],
      loading: true,
    };
  },
  methods: {
    async getRuleList() {
      const { data: res } = await this.$http.get("user/get_rulelist");
      if (res.status !== 200) {
        this.loading = false;
        return this.$message.error(res.msg);
      }
      this.$message.success({
        message: res.msg,
        duration: 1000,
      });
      this.loading = false;
      this.ruleList = res.data;
    },
  },
  created() {
    this.getRuleList();
  },
};
</script>

<style lang="less" scoped>
.rule_container {
  position: relative;
  height: 89%;
  padding: 40px 20px;
  background: linear-gradient(to right, #d9e7f2, #f0f7fd);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 40px;
  p {
    font-size: 36px;
    font-weight: bold;
    color: #4682b4;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  }
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-height: 500px; /* 限制 banner 的最大高度 */
  overflow-y: auto; /* 超过最大高度时出现滚动条 */
  padding-right: 20px; /* 防止右侧滚动条与内容重叠 */
}
.rule-button {
  width: 100%; /* 让按钮宽度适应父容器 */
  max-width: 500px; /* 如果需要限制最大宽度，可以设置 max-width */
  height: auto; /* 高度根据内容自适应 */
  line-height: 1.5; /* 保证内容在垂直方向上有适当的间距 */
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 内容水平居中 */
  align-items: center; /* 内容垂直居中 */
  padding: 10px 20px; /* 添加一些内边距以使内容更加舒适 */
  text-align: center; /* 确保文本在按钮内居中 */
  font-size: 18px; /* 适当的字体大小 */
}
.el-tooltip {
  width: 500px;
  font-size: 16px;
  color: white;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.el-tooltip:hover {
  background-color: #3a8bcc;
}

.el-tooltip:nth-child(odd) {
  background: #1e90ff;
}

.el-tooltip:nth-child(even) {
  background: #31b0d5;
}

.el-tooltip .content_tip {
  font-size: 16px;
  line-height: 1.5;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.el-button {
  font-size: 16px;
  color: #fff;
  background: linear-gradient(to right, #4682b4, #3a8bcc);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin-top: 10px;
}

.el-button:hover {
  transform: scale(1.05);
  background-color: #357ab7;
}

.el-tooltip:nth-child(1) {
  margin-top: 100px;
}

.el-tooltip:nth-child(n+2) {
  margin-top: 50px;
}

.el-tooltip:nth-child(odd) {
  background-color: deepskyblue;
}

.el-tooltip:nth-child(even) {
  background-color: rgb(49, 176, 213);
}
</style>

